<template>
	<view class="login-warp-box">
		<view class="login-gb bg-gradual-red">
			<view class="top-icon">
				<u-icon name="arrow-left" color="#ffffff" size="44" @tap="goBack"></u-icon>
			</view>
			<view class="text">
				HI ~
			</view>
			<view class="text">
				忘记密码
			</view>
		</view>
		<view class="login-box">
			<view class="login-img">
				<image class="img" src="../../assets/images/login-bg.png"></image>
			</view>
			
			<view class="login-input-box">
				<view class="input-label">
					<l-input icon="icondianhua" icon-font="32" incon-color="#E54D42" input-type="Number"
					placeholder-text="请输入手机号码"
					 :max-lenght="32" val-name="phone" @getVal="getVal"></l-input>
				</view>
				
				<view class="input-label u-margin-top-20">
					<view class="input-code-l">
						<l-input icon="iconsecurityCode-b" icon-font="32" incon-color="#E54D42" input-type="text"
							placeholder-text="请输入验证码"
						 :max-lenght="16" val-name="code" @getVal="getVal"></l-input>
					</view>
					<view class="input-code-r">
						<text class="code" @tap="getCode">{{codeText}}</text>
					</view>
				</view>
				
				
				<view class="input-label u-margin-top-20">
					<l-input icon="iconmima" icon-font="32" incon-color="#E54D42" input-type="password"
						placeholder-text="请输入8-16位英文数字组成的密码"
					 :max-lenght="16" val-name="password" @getVal="getVal"></l-input>
				</view>
				
				
				
				<view class="input-label u-margin-top-20">
					<l-input icon="iconmima" icon-font="32" incon-color="#E54D42" input-type="password"
						placeholder-text="再次输入密码"
					 :max-lenght="16" val-name="rePsd" @getVal="getVal"></l-input>
				</view>
				
				
				<view class="do-login">
					<u-button type="error" shape="circle" :ripple="true" @tap="doSubmit">确认</u-button>
				</view>
				<view class="pas-link">
					<text class="pas-text" @click="goLogin">已有账号,去登录</text>
				</view>
			</view>
			
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	
	import lInput from "@/components/input/lInput.vue"
	export default{
		name:"login",
		data(){
			return {
				valForm:{
					phone:"",
					password:"",
					rePsd:"",
					code:"",
				},
				codeTime:120,/*  登录获取验证码倒计时  */
				codeText:"获取验证码",
			}
		},
		methods:{
			
			/*  获取输入框的值  */
			getVal(val,name){
				this.valForm[name] = val
			},
			
			/*  去找忘记密码页面  */
			goLogin(){
				uni.navigateTo({
					url:"/pages/login/login"
				})
			},
			
			/*  获取验证码  */
			getCode(){
				let t = setTimeout(()=>{
					clearTimeout(t)
					this.$refs.uToast.hide()
					if(this.codeTime !=120){
						this.$refs.uToast.show({
							title: "验证码已经获取",
							duration:3000,
						})
						return false
					}
					
					let phone = this.valForm.phone
					let regPhone = this.validationLogin(phone,0)
					if(!regPhone.success){
						this.$refs.uToast.show({
							title: regPhone.message,
							duration:3000,
						})
						return false
					}
					this.codeTimeDown()
				},100)
			},
			
			/*  验证码时间倒计时  */
			codeTimeDown(){
				let ti = setInterval(()=>{
					if(this.codeTime == 0){
						this.codeTime = 120
						this.codeText = "获取验证码"
						clearInterval(ti)
						return false
					}
					this.codeTime -- 
					this.codeText = this.codeTime + 's后再次获取' 
				},1000)
			},
			
			/*  点击确认的时候  */
			doSubmit(){
				let t = setTimeout(()=>{
					clearTimeout(t)
					this.$refs.uToast.hide()
					let phone = this.valForm.phone
					let regPhone = this.validationLogin(phone,0)
					if(!regPhone.success){
						this.$refs.uToast.show({
							title: regPhone.message,
							duration:3000,
						})
						return false
					}
					if(this.valForm.code.length == 0){
						this.$refs.uToast.show({
							title: "验证码不能为空",
							duration:3000,
						})
						return false
					}
					let psd = this.valForm.password
					let regPsd = this.validationLogin(psd,1)
					if(!regPsd.success){
						this.$refs.uToast.show({
							title: regPsd.message,
							duration:3000,
						})
						return false
					}
					
					if(psd != this.valForm.rePsd){
						this.$refs.uToast.show({
							title: '两次输入密码不一致',
							duration:3000,
						})
						return false
					}
					if(this.valForm.username.length == 0){
						this.$refs.uToast.show({
							title: "用户名不能为空",
							duration:3000,
						})
						return false
					}
					console.log("a")
				},100)
				
			},
			
			
			
			/*  验证手机号码和密码  0 是手机号码 1是密码 */
			validationLogin(val,type){
				let result = {success:false,message:""}
				if(val == "" || val.length == 0){
					let msg = type == 0 ? '手机号码' : '密码'
					result.message = msg + "不能为空"
					return result
				}
				let reg = type == 0 ? (/^1(3|4|5|6|7|8|9)\d{9}$/) : (/^[a-zA-Z0-9]{8,16}$/)
				if(!reg.test(val)){
					let msg = type == 0 ? '手机号码格式不正确' : '密码格式为8-16位英文和数字组成'
					result.message = msg
					return result
				}
				result.success = true
				return result
			},
			goBack(){
				uni.navigateBack({
					 delta: 1
				})
			},
			
			
		},
		
		components:{
			lInput
		},
		
	}
</script>

<style lang="scss" scoped>
	page{
		background: #FFFFFF;
	}
	.login-warp-box{
		.login-gb{
			width: 100%;
			height: 460rpx;
			.top-icon{
				padding: 60rpx 30rpx;
			}
			.text{
				font-size: 44rpx;
				color: #FFFFFF;
				padding: 0 45rpx;
				
			}
			
		}
		/*  登录与注册开始  */
		.login-box{
			width: 90%;
			margin: -80rpx 0 0 5%;
			z-index: 555;
			position: relative;
			padding: 40rpx 60rpx 60rpx 40rpx;
			box-sizing: border-box;
			.login-img{
				position: absolute;
				left: 0;
				top: 0;
				bottom: 0;
				right: 0;
				z-index: -1;
				.img{
					width: 100%;
					height: 100%;
				}
			}
			/*  tab切换  */
			.tab-box{
				width: 100%;
				display: flex;
				justify-content: flex-start;
				align-items: flex-start;
				.tab-item{
					color: #333333;
					text-align: center;
					flex-grow: 1;
				}
				.tab-text{
					font-size: 32rpx;
					padding: 0 20rpx 30rpx 20rpx;
					border-bottom: 4rpx solid #FFFFFF;
					transition: border-color 0.2s;
				}
				.tab-action{
					color: #E54D42;
					border-bottom: 4rpx solid #E54D42;
				}
			}
			/*  tab切换end  */
			
			.login-input-box{
				padding: 40rpx 0 0 0;
				.input-label{
					padding-bottom: 10rpx;
					border-bottom: 1px solid #f1f1f1;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					.input-code-l{
						flex-grow: 1;
					}
					.input-code-r{
						width: 240rpx;
						padding: 0 10rpx;
						border-radius: 6rpx 6rpx;
						border: 1px solid #F1F1F1;
						flex-grow: 0;
						height: 70rpx;
						text-align: center;
						line-height: 70rpx;
						.code{
							font-size: 20rpx;
							color: #808080;
						}
					}
				}
			}
			
		}
		.do-login{
			padding-top: 80rpx;
		}
		.pas-link{
			width: 100%;
			padding-top: 40rpx;
			padding-bottom: 10rpx;
			text-align: right;
			.pas-text{
				color: #333333;
				font-size: 24rpx;
			}
		}
		/*  登录与注册end  */
	}
	
</style>
